<template>
  <div class="self-info">
    <el-form
        ref="selfInfoForm"
        :model="selfInfoForm"
        :rules="rules"
        label-width="120px"
        class="demo-ruleForm"
    >
      <el-form-item label="头像">
        <el-upload
            class="avatar-uploader"
            accept=".jpg,.png"
            :show-file-list="false"
            name="avatar"
            :headers="myHeaders"
            action="http://127.0.0.1:8086/self/avatar/upload"
            :on-success="handleAvatarSuccess"
        >
          <img style="height: 100px;width: 100px;"
               :src="imageUrl" class="avatar" />
        </el-upload>
      </el-form-item>
      <el-form-item label="账户名" prop="selfName">
        <el-input v-model="selfInfoForm.selfName"></el-input>
      </el-form-item>
      <el-form-item label="账户密码" prop="selfPassword">
        <el-input type="password" show-password v-model="selfInfoForm.selfPassword"></el-input>
      </el-form-item>
      <el-form-item label="座右铭" prop="motto">
        <el-input v-model="selfInfoForm.motto"></el-input>
      </el-form-item>
      <el-form-item label="作者说" prop="say">
        <el-input type="textarea" v-model="selfInfoForm.say"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('selfInfoForm')"
        >提交</el-button
        >
        <el-button @click="resetForm('selfInfoForm')">重置</el-button>
      </el-form-item>
    </el-form>

  </div>
</template>

<script>
import {ElMessage} from "element-plus";
import axios from "../../axios/axios";
import imageUrl from "../../assets/avatar.svg"


export default {
  name: "SelfInfo",
  components: {
  },
  data () {
    return {
      imageUrl: imageUrl,
      myHeaders: {Authorization: localStorage.getItem('token')},
      rules: {
        selfName: [
          {
            required: true,
            message: '请输入你的管理员账户名',
            trigger: 'blur',
          }
        ],
        selfPassword: [
          {
            required: true,
            message: '请输入你的管理员密码',
            trigger: 'blur',
          }
        ],
        motto: [
          {
            required: true,
            message: '请输入你的座右铭',
            trigger: 'blur',
          }
        ],
        say: [
          {
            required: true,
            message: '请输入你想说的话',
            trigger: 'blur',
          }
        ]
      },
      selfInfoForm: {}
    }
  },
  created() {
    this.getSelfInfo()
  },
  methods: {
    getSelfInfo(){
      axios.get("/admin/info").then(res=>{
       this.selfInfoForm =  res.data.data;
       this.imageUrl = this.selfInfoForm.selfAvatar
      })
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // console.log(this.selfInfoForm)
          axios.put("/self/update",this.selfInfoForm).then(() => {
            // console.log(res.data.data)
            ElMessage({
              showClose: true,
              message: '你已成功提交数据',
              type: 'success',
            })
          }).catch((error)=>{
            console.log(error)
            ElMessage({
              showClose: true,
              message: '提交未成功,请重新提交!',
              type: 'error',
            })
          })
        } else {
          ElMessage({
            showClose: true,
            message: '请正确填写数据',
            type: 'warning',
          })
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    handleAvatarSuccess(res, file) {
      if(res.code === 200){
        // console.log(res.code)
        this.imageUrl = URL.createObjectURL(file.raw)
        this.selfInfoForm.selfAvatar = res.data
        // console.log(this.selfInfoForm.selfAvatar)
        // console.log(res.data)
      }else {
        ElMessage.error("小主人，上传错误，请重新上传")
      }
    }
  }
}
</script>

<style scoped>
.self-info{
  max-width: 70%;
}
.el-input{
  max-width: 500px;
}
</style>
